<!DOCTYPE html>
<html>
<head>
  <div  th:replace="common/header.html"></div>
  <script th:src="@{'/static/js/tuopu/jtopo-0.4.8-min.js'}"></script>
  <script th:src="@{'/static/js/tuopu/toolbar.js'}"></script>


</head>
<body th:class="${application.sidebarCollapse}">

<div class="wrapper">

  <div th:replace="common/navbar.html"></div>

  <div th:replace="common/aside.html"></div>


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <div id="content">
    <canvas id="canvas" width="1800" height="1020" style="border:1px solid rgb(68,68,68); cursor:default;background-color:rgb(338,338,338)"></canvas>
    </div>


  </div>

  <div th:replace="common/footer.html"></div>

</div>
<!-- ./wrapper -->

<script th:inline="javascript">

  var licenseState = [[${session.LICENSE_STATE}]];

  $(document).ready(function(){
            function node(x, y, img){
              var node = new JTopo.Node();
              node.setImage('/wgcloud/static/js/tuopu/img/' + img, true);
              node.setLocation(x, y);
              scene.add(node);
              return node;
            }
            function node2(img){
              var node = new JTopo.Node();
              node.setImage('/wgcloud/static/js/tuopu/img/' + img, true);
              // node.setLocation(x, y);
              scene.add(node);
              return node;
            }
            function linkNode(nodeA, nodeZ, f){
              var link;
              if(f){
                link = new JTopo.FoldLink(nodeA, nodeZ);
              }else{
                link = new JTopo.Link(nodeA, nodeZ);
              }
              link.direction = 'vertical';
              link.strokeColor = "128,64,64";
              scene.add(link);
              return link;
            }


            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene(stage);
            //设置背景
            scene.backgroundColor="#C8C8C8";
            //scene.background = './img/bg.jpg';

            var web_server = node(760, 520, 'server_database.png');
            web_server.text='server';
            web_server.fontColor = '219,118,39';


            var nodeListJson =[[${nodeList}]];
            for(var i = 0; i < nodeListJson.length; i++){
              var s1 = node(nodeListJson[i].x, nodeListJson[i].y, 'server.png');
              s1.text = nodeListJson[i].hostname; // 文字
              s1.fontColor = '219,118,39';
              linkNode(web_server, s1);

              if(nodeListJson[i].state == '2'){
                s1.alarm="已下线";
                /*setInterval(function(){
                  if(s1.alarm == '已下线'){
                    s1.alarm = null;
                  }else{
                    s1.alarm = '已下线'
                  }
                }, 2000);*/
              }

            }




            // linkNode(h1, r1);

            // JTopo.layout.layoutNode(scene, r1, true);

          }
  );

</script>
</body>
</html>
